<template>
    <div class="login_container">
        <div class="login_form">
            <h3 class="title">书籍商城后台管理系统</h3>
            <el-form ref="formRef" :model="loginForm">
                <!-- 用户名 -->
                <el-form-item>
                    <el-input v-model="loginForm.account" placeholder="请输入账号">
                        <template #prefix>
                            <el-icon class="el-input__icon"><User /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item>
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码">
                        <template #prefix>
                            <el-icon class="el-input__icon"><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 记住我和忘记密码 -->
                <div class="rememberMe">
                    <!-- <el-checkbox v-model="loginForm.rememberMe" label="记住我" size="large" /> -->
                    <!-- 忘记密码 -->
                    <!-- <el-text class="forgetpass mx-1" type="primary">忘记密码?</el-text> -->
                </div>
                <!-- 分割线 -->
                <!-- <el-divider>其他登录方式</el-divider> -->
                <!-- 其他的登录方式 -->
                <!-- <div class="other_login">
                    <el-icon class="other_login_item"><ChromeFilled /></el-icon>
                    <el-icon class="other_login_item"><ElemeFilled /></el-icon>
                    <el-icon class="other_login_item"><WindPower /></el-icon>
                </div> -->
                <el-form-item>
                    <!-- 按钮 -->
                    <el-button style="width: 100%;height: 40px;font-size: 16px;" type="primary" @click="Login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import {ref, getCurrentInstance, onMounted} from  'vue';
import { loginByAccount } from '@/api/user.js';
import { useStore } from 'vuex'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const store = useStore();
const loginForm = ref({
    account: "",
    password: "",
    rememberMe: false
})
const router = useRouter();
const { proxy } = getCurrentInstance();

onMounted(() => {
    const remembered = JSON.parse(localStorage.getItem('rememberUser') || '{}');
    if (remembered.account) {
        loginForm.value.account = remembered.account;
        loginForm.value.password = remembered.password;
        loginForm.value.rememberMe = true;
    }
});

const Login = async () => {
    try {
        const resp = await loginByAccount(loginForm.value);
        if(resp.data.code === 200) {
            // 检查是否是管理员
            if(resp.data.data.role !== 'admin') {
                ElMessage.error('您没有管理员权限');
                return;
            }
            
            ElMessage.success("登录成功");
            // 记住我逻辑
            if (loginForm.value.rememberMe) {
                localStorage.setItem('rememberUser', JSON.stringify({
                    account: loginForm.value.account,
                    password: loginForm.value.password
                }));
            } else {
                localStorage.removeItem('rememberUser');
            }
            // 存储用户信息到store和localStorage
            store.commit('setUserInfo', resp.data.data);
            localStorage.setItem("userInfo", JSON.stringify(resp.data.data));
            router.push('/admin/goods');
        } else {
            ElMessage.error(resp.data.message || '登录失败');
        }
    } catch (error) {
        console.error('登录错误:', error);
        ElMessage.error('登录失败，请稍后重试');
    }
};
</script>

<style lang="scss" scoped>
.login_container {
    // 背景图
    background-image: url('https://pic2.zhimg.com/v2-2cd360175124a8d2230e67eaaf1f2b81_1440w.jpg');
    background-size: 100%;
    height: 100%;
    display: flex;
    //justify-content: flex-end;
    .login_form {
        background: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 500px;
        height: 400px;
        margin: auto;
        margin-top: 400px;
        //background-color: transparent;
        background-color: rgb(255, 255, 255,1);
        border-radius: 10px;
        .title {
            margin-bottom: 20px;
        }
        .rememberMe {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .forgetpass {
                cursor: pointer;
            }
        }
        // 其他登录
        .other_login {
            display: flex;
            justify-content: center;
            margin: auto;
            margin-bottom: 20px;
            .other_login_item {
                margin-right: 60px;
                cursor: pointer;
            }
            i{
                font-size: 25px;
                &:first-child{
                    color: rgb(6, 177, 6);
                }
                &:nth-child(2){
                    color: rgb(58, 172, 254);
                }
                &:nth-child(3){
                    color: rgb(244, 78, 78);
                }
            }
        }
    }
}

.el-form {
    width: 60%;
    .el-form-item {
        width: 100%;
    }
}
:deep(.el-input__wrapper){
    height: 45px;
    .el-input__inner{
        height: 35px;
        font-size: 16px;
    }
}


</style>